<template>
  <div class="home">
    <header>鑫海乐购商城</header>
    <section>
      <div class="banner">
        <md-swiper ref="swiper" :is-prevent="false" :useNative-driver="false">
          <md-swiper-item :key="$index" v-for="(item, $index) in bannerList">
            <img :src="$api.imgUrl + item.img" alt="" />
          </md-swiper-item>
        </md-swiper>
      </div>
      <div class="tabbar">
        <md-tab-bar
          v-model="current"
          :items="items"
          :hasInk="false"
          @change="onTabChange"
        ></md-tab-bar>
      </div>
      <div class="commodity-area">
        <div class="commodity-area-one">
          <commodity-card
            class="card"
            v-for="(item, index) in commodityList"
            :key="index"
            :cardInfo="item"
          ></commodity-card>
        </div>

        <div class="announcement">
          <div class="broadcast">
            <i
              class="iconfont icongonggao trumpet"
              style="font-size: 16px;color: #317EB9;"
            ></i>
            <md-swiper
              :dragable="false"
              :is-prevent="false"
              :default-index="0"
              :has-dots="false"
              transition="slideY"
            >
              <md-swiper-item :key="$index" v-for="(item, $index) in notice">
                <div
                  class="broadcast-name"
                  @click="toAnnouncement(item.article_id)"
                >
                  <span>{{ MsgTitle(item.article_type) }}</span
                  ><span>{{ item.article_title }}</span>
                </div>
              </md-swiper-item>
            </md-swiper>
          </div>
          <div
            class="broadcast-more"
            @click="$commonJs.goPage('personMessage')"
          >
            <span>更多</span>
            <i class="iconfont icongengduo" style="color: #E6E6E6;"></i>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { Swiper, SwiperItem, TabBar } from "mand-mobile";
export default {
  name: "index",
  components: {
    commodityCard: () => import("@/components/commodity-card/index"),
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
    [TabBar.name]: TabBar
  },
  data() {
    return {
      bannerList: [],
      current: 1,
      items: [
        { name: 1, label: "预购商品" },
        { name: 2, label: "新购商品" },
        { name: 3, label: "促销商品" }
      ],
      commodityList: [],
      notice: []
    };
  },
  methods: {
    toAnnouncement(id) {
      this.$router.push({
        path: "/platform-announcement/" + id
      });
    },
    MsgTitle(type) {
      if (type === 1) {
        return "【平台公告】";
      } else {
        return "【其他公告】";
      }
    },
    getHomeSwipe() {
      this.$ajax
        .get(this.$api.getHomeSwipe)
        .then(res => {
          this.bannerList = res.data.imglist;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    getGoodlist(type) {
      let info = {
        goods_type: type
      };
      this.$ajax
        .get(this.$api.getGoodlist, info)
        .then(res => {
          this.commodityList = res.data.goodlist;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    getArticleList() {
      let info = {
        article_id: ""
      };
      this.$ajax
        .get(this.$api.getArticleList, info)
        .then(res => {
          this.notice = res.data.list;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    onTabChange(item, index) {
      this.$refs.swiper.goto(index);
      let type = "";
      switch (index) {
        case 0:
          type = "1";
          break;
        case 1:
          type = "2";
          break;
        case 2:
          type = "3";
          break;
      }
      this.getGoodlist(type);
    }
  },
  mounted() {
    this.getHomeSwipe();
    this.getGoodlist("1");
    this.getArticleList();
  },
  created() {}
};
</script>

<style scoped lang="stylus">
  .home{
    height 100%;
    background-color #F0F0F0;
  }
header{
  width: 100%;
  height: 88px;
  text-align: center;
  line-height: 88px;
  background-color: #ffffff;
  font-size: 36px;
  font-weight: 500;
}
.banner{
  height: 300px;
  img{
    height: 300px;
    width 100%;
  }
}
.md-tab-bar{
  background-color #F0F0F0;
  padding-top 38px;
  /*display: inline-block;*/
}
  .commodity-area{
    padding 32px 24px 32px;

  }
.card:nth-child(odd){
    margin-right 18px
  }
  .announcement{
    display flex;
    background-color #ffffff;
    border-radius:0px 0px 16px 16px;
  }
.broadcast{
  display flex;
  justify-content space-between;
  width 100%;
  height 48px;
  padding 10px 0 9px 0;
  box-sizing border-box;
}
  .broadcast>i{
    padding 0 14px 0 16px;
  }
.broadcast-name>span{
  font-size 24px;
  line-height 30px;
}
  .broadcast-name>span:nth-of-type(1){
    color #317eb9;
  }
  .broadcast-name>span:nth-of-type(2){
    color #666666;
  }
  .broadcast-more{
    border-left 2px solid #F0F0F0;
    padding 10px 0 0 16px;
    width 95px;
  }
  .broadcast-more>span{
    font-size 22px;
    color #cccccc;
    line-height 30px;
  }
</style>
